<template>
    <div class="fullScreen bg-c-wh">
        <lot-header></lot-header>
        <description v-if="this.$store.state.lotPlayDesc"></description>
        <div class="tx-s-14">
            <!-- 期数、倒计时、历史数据 -->
            <lot-overview></lot-overview>
            <!-- 提示 -->
            <div class="flex-box flex-ac flex-pe pad-tb bor-b-g">
                <div class="iconSize-125 icon_prompt marg-03"></div>
                <div class="tx-s-14 tx-c-666 mar-r-5" @click="showDesc()">玩法提示</div>
            </div>
            <div v-if="lotData != null">
                <!-- 冠亚和数字 -->
                <div class="scroll-lot bg-c-g" v-show="lotPlayIndex== 0">
                    <div class="title-lot">冠亚和</div>
                    <lot-options :title="['', '']" :content="GYHCont" :odds="lotOdds.gyzh"></lot-options>
                </div>
                <!-- 冠亚和1至5 -->
                <div class="scroll-lot" v-show="lotPlayIndex == 1">
                    <div v-for="(value, key) in d1d5Play" :key="key">
                        <div class="title-lot">{{ value }}</div>
                        <lot-options :title="[key, value]" :content="c1d10Cont" :odds="lotOdds" :circle="true"></lot-options>
                        <lot-options :title="[key, value]" :content="dxdslhCont" :odds="lotOdds.sdsm"></lot-options>
                    </div>
                </div>
                <!-- 冠亚和6至10 -->
                <div class="scroll-lot" v-show="lotPlayIndex == 2">
                    <div v-for="(value, key) in d6d10Play" :key="key">
                        <div class="title-lot">{{ value }}</div>
                        <lot-options :title="[key, value]" :content="c1d10Cont" :odds="lotOdds" :circle="true"></lot-options>
                        <lot-options :title="[key, value]" :content="dxdsCont" :odds="lotOdds.sdsm"></lot-options>
                    </div>
                </div>
            </div>
        </div>
        <!-- footer -->
        <div class="flex-box flex-pj lotteryFooter tx-s-14">
            <div class="tx-c-r bor-r-g footer-btn" @click="cancel">重置</div>
            <div class="flex-box flex-f1">
                <input v-model="money" class="input-ol-n wd-fh tx-c" type="number" placeholder="请输入单注金额" />
            </div>
            <div class="tx-c-g bor-l-g footer-btn" @click="confirm">确定</div>
        </div> 
    </div>
</template>
<script type="text/ecmascript-6">
import 'common/css/lottery.css'
import { mapGetters } from 'vuex' 
import { isEmptyObject } from '../../../common/js/common'
import Trans from '../../../common/js/eventTrans'
import LotHeader from "../../../components/lottery/lot-header"
import description from "../../../components/lottery/description"
import LotOverview from "../../../components/lottery/lotOverview"
import LotOptions from "../../../components/lottery/lotOptions"
import { GYHCont, d1d5Play, c1d10Cont, dxdslhCont, d6d10Play, dxdsCont } from '../../../common/js/data' 
export default {
    data () {
        return {
            money : '',
            GYHCont : GYHCont, // 冠亚和数字
            d1d5Play : d1d5Play, // 1至5名玩法
            c1d10Cont : c1d10Cont, // 1至5名数字内容
            dxdslhCont : dxdslhCont, // 1至5名汉字内容
            d6d10Play : d6d10Play, // 6至10名玩法
            dxdsCont : dxdsCont // 6至10名汉字内容
        }
    },
    mounted () {
        var _this = this
        Trans.$on('togLotteryTab', function (msg) {
            _this.cancel()
        })
    },
    methods: {
        // 重置，清空所有操作
        cancel () { 
            this.money = ''
            this.$store.state.lotOptions = []
            this.$store.state.lotSelData = []
        },
        // 确定
        confirm () {
            const {lotStatus} = this.$store.state
            if(lotStatus == 0){
                this.$alert('已封盘')
            }else if(lotStatus == -1){ 
                this.$alert('已关盘')
            }else if(isEmptyObject(this.$store.state.lotSelData)){
                this.$toast('未下注', 2000)
            }else if(lotStatus == 1){
                this.$router.push({
                    path: '/lotteryOrder',
                    query: {
                        inputPrice : this.money || this.lotData.min,
                        payPriceMin : this.lotData.min,
                        payPriceMax : this.lotData.max
                    }
                })
            }
        },
        // 打开玩法提示
        showDesc () {
            this.$store.state.lotPlayDesc = true
        }
    },
    components: {
        LotHeader,
        description,
        LotOverview,
        LotOptions
    },
    computed: {
        ...mapGetters([
            'lotData',
            'lotOdds',
            'lotPlayIndex'
        ])
    }
};
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
    .scroll-lot
        position : fixed
        top : 9.25rem
        bottom : 3.25rem
        width : 96%
        margin : 0 2%
        overflow: auto
    .scroll-lot::-webkit-scrollbar
        display : none
</style> 